<template>
  <div class="qs-y-table-card">
    <el-table
      v-loading="loading"
      border
      :data="tableData"
      row-key="id"
      stripe
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column align="center" label="序号" width="55">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批名称" min-width="150" prop="name" show-overflow-tooltip />
      <el-table-column align="center" label="审批部门" min-width="120" prop="deptId" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.dept?.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="审批职位" min-width="120" prop="posts" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.posts?.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请人级别" min-width="120" prop="isDepartmentCadres" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.isDepartmentCadres ? '正处级以上' : '正处级以下' }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="活动ID" min-width="120" prop="activityId" show-overflow-tooltip /> -->
      <el-table-column align="center" label="备注" min-width="150" prop="remark" show-overflow-tooltip />

      <el-table-column align="center" fixed="right" label="操作" width="280">
        <template #default="{ row }">
          <!-- <el-button v-if="!row.children?.length" size="small" text type="primary" @click="$emit('config', row)">配置</el-button> -->
          <el-button size="small" text type="primary" @click="$emit('add-child', row)">新增子级</el-button>
          <el-button size="small" text type="primary" @click="$emit('edit', row)">编辑</el-button>
          <el-button size="small" text type="danger" @click="$emit('delete', row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import type { ApprovalProcess } from '/@/api/approval/types'

defineProps<{
  tableData: ApprovalProcess[]
  loading: boolean
}>()

defineEmits<{
  (e: 'config', row: ApprovalProcess): void
  (e: 'edit', row: ApprovalProcess): void
  (e: 'delete', row: ApprovalProcess): void
  (e: 'add-child', row: ApprovalProcess): void
}>()
</script>

<style scoped>
.qs-y-table-card {
  background-color: var(--el-bg-color);
  border-radius: 4px;
  padding: 20px;
}
</style>
